
<div style="POSITION: relative" id="content">
  <h3>使用easyUI为数据表格（datagrid）添加查询功能
    </h3><div id="article_content" class="article_content">
    <p>在这个示例中我们将向你展示如何从数据库得到数据显示他们到datagrid,然后演示如何根据用户输入的搜索关键词搜寻显示结果.</p>
    <p><img src="documentation/images/1344503698_5605.png" alt=""><br>
    </p>
    <p></p>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"></div>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 DataGrid</h4>
    <p></p>
    <p style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 datagrid和分页功能然后添加工具栏到其中.</p>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:600px;height:250px&quot;  
        url=&quot;datagrid24_getdata.php&quot; toolbar=&quot;#tb&quot;  
        title=&quot;Load Data&quot; iconCls=&quot;icon-save&quot;  
        rownumbers=&quot;true&quot; pagination=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;80&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;150&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot;&gt;Stauts&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    工具栏定义如下:
    <p>
    <pre name="code" class="html">&lt;div id=&quot;tb&quot; style=&quot;padding:3px&quot;&gt;  
    &lt;span&gt;Item ID:&lt;/span&gt;  
    &lt;input id=&quot;itemid&quot; style=&quot;line-height:26px;border:1px solid #ccc&quot;&gt;  
    &lt;span&gt;Product ID:&lt;/span&gt;  
    &lt;input id=&quot;productid&quot; style=&quot;line-height:26px;border:1px solid #ccc&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; plain=&quot;true&quot; onclick=&quot;doSearch()&quot;&gt;Search&lt;/a&gt;  
&lt;/div&gt;  </pre>
    当用户输入查询&#20540;和按下查询按钮'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">doSearch</span>'函数将被调用.
    </p>
    <p>
    <pre name="code" class="javascript">function doSearch(){  
    $('#tt').datagrid('load',{  
        itemid: $('#itemid').val(),  
        productid: $('#productid').val()  
    });  
}  </pre>
    以上代码我们调用了<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">load方法去加载新的datagrid数据,我们需要传入<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">itemid和<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">productid参数到服务器:</span></span></span>
    </p>
    <p></p>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 服务器端代码</h4>
      <pre name="code" class="php">include 'conn.php';  
  
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;  
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;  
$itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_POST['itemid']) : '';  
$productid = isset($_POST['productid']) ? mysql_real_escape_string($_POST['productid']) : '';  
  
$offset = ($page-1)*$rows;  
  
$result = array();  
  
$where = "itemid like '$itemid%' and productid like '$productid%'";  
$rs = mysql_query("select count(*) from item where " . $where);  
$row = mysql_fetch_row($rs);  
$result["total"] = $row[0];  
  
$rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");  
  
$items = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($items, $row);  
}  
$result["rows"] = $items;  
  
echo json_encode($result);  </pre>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
      <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid24-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
      <br>
      <br>
    </div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>